<template>
  <div class="userDetail">
    <ul>
      <li>
        <div class="icon">
          <UserBio />
        </div>
        <div class="info">
          <p>个性签名 Description</p>
          <p>{{ userInfo.bio }}</p>
        </div>
      </li>
      <li>
        <div class="icon">
          <Email />
        </div>
        <div class="info">
          <p>邮箱 E-mail</p>
          <p>{{ userInfo.email }}</p>
        </div>
      </li>
      <li>
        <div class="icon">
          <Language />
        </div>
        <div class="info">
          <p>语言 Language</p>
          <p>中文</p>
        </div>
      </li>
      <li>
        <div class="icon">
          <Date />
        </div>
        <div class="info">
          <p>注册日期 Register Time</p>
          <p>{{ userInfo.createdAt.substr(0, 10) }}</p>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
import UserBio from "./UserBio.vue"
import Date from "./Date.vue"
import Language from "./Language.vue"
import Email from "./Email.vue"
import { mapState } from "vuex"

export default {
  name: "userDetail",
  data() {
    return {
      createdAt: ""
    }
  },
  components: {
    UserBio,
    Date,
    Language,
    Email
  },
  props: {
    userDetailData: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  computed: {
    ...mapState(["userInfo", "token"])
  }
}
</script>

<style lang="less" scoped>
.userDetail {
  display: flex;
  margin: auto;
  ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    li {
      width: 30%;
      display: flex;
      align-items: center;
      border-radius: 5px;
      padding: 36px 20px;
      margin: 0 25px 40px;
      // box-shadow:0 1px 4px rgba(100, 94, 94, 0.2), 0 0 20px rgba(70, 68, 68, 0.1) inset;
      box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
      .icon {
        margin-right: 5px;
      }
      .info {
        display: flex;
        flex-direction: column;
        p {
          margin: 0 10px;
          line-height: 30px;
        }
        p:nth-child(1) {
          font-weight: bold;
          font-size: 16px;
        }
      }
    }
  }
}
</style>
